<template>
  <div class="tax-info">
    <e-container>
      <e-title title="Tax Info" />
      <a-divider />
      <div class="form">
        <a-form ref="formRef" :model="apiData" layout="vertical" :rules="apiData.type === 1 ? rules1 : rules2">
          <a-row :gutter="gutter">
            <a-col :span="24">
              <a-form-item label="ID No. of Taxpayer (纳税人识别号)" name="taxPayer">
                <a-input v-model:value="apiData.taxPayer" autocomplete="off" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="gutter">
            <a-col :span="24">
              <a-form-item label="Address & Telephone (地址和电话)" name="addressTel">
                <a-input v-model:value="apiData.addressTel" autocomplete="off" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="gutter">
            <a-col :span="24">
              <a-form-item label="Opening Bank & Account Number (开户行和账号)" name="openingBankNumber">
                <a-input v-model:value="apiData.openingBankNumber" autocomplete="off" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-divider />
      <div class="buttons">
        <a-space size="middle">
          <a-button @click="handleCancel">Cancel</a-button>
          <a-button v-permission="'FinancialInformation:Basic:Edit'" type="primary" @click="handleSave">Save</a-button>
        </a-space>
      </div>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import f from '@/api/client/financial.js'
import { CONFIRM_BACK_TO_DETAIL, SAVED_SUCCESSFULLY } from '@/constants/message'
const { Modal, message } = inject('Feedback')
const route = useRoute()
const router = useRouter()
const gutter = [120, 16]
const emits = defineEmits(['updated'])
const formRef = ref(null)
const { id } = route.params

const rules1 = {
  taxPayer: [
    {
      required: true,
      whitespace: true,
      message: 'Please input ID No. of Taxpayer'
    }
  ]
}
const rules2 = {
  taxPayer: [
    {
      required: true,
      whitespace: true,
      message: 'Please input ID No. of Taxpayer'
    }
  ],
  addressTel: [
    {
      required: true,
      whitespace: true,
      message: 'Please input Address & Telephone'
    }
  ],
  openingBankNumber: [
    {
      required: true,
      whitespace: true,
      message: 'Please input Opening Bank & Account Number'
    }
  ]
}

const apiData = reactive({
  taxPayer: '',
  addressTel: '',
  openingBankNumber: '',
  type: 0
})
/**
 * 保存
 */
const handleSave = () => {
  formRef.value.validate().then(() => {
    f.updatePaperInvoiceSettings({
      id: id,
      taxpayerNumber: apiData.taxPayer?.trim(),
      paperInvoiceAddressTel: apiData.addressTel?.trim(),
      clientAccountBankNumber: apiData.openingBankNumber?.trim()
    }).then(res => {
      if (res.code === 2000) {
        message.success(SAVED_SUCCESSFULLY)
        router.push({ name: 'Financial Information' })
        emits('updated')
      }
    })
  })
}
/**
 * 取消模态框
 */
const handleCancel = () => {
  Modal.confirm({
    content: CONFIRM_BACK_TO_DETAIL,
    okButtonProps: { danger: true },
    onOk: () => {
      router.push({ name: 'Financial Information' })
      emits('updated')
    }
  })
}
/**
 * 回显数据
 */
const review = () => {
  f.getPaperInvoiceSettings(id).then(res => {
    if (res.code === 2000) {
      apiData.taxPayer = res.data.taxpayerNumber
      apiData.addressTel = res.data.paperInvoiceAddressTel
      apiData.openingBankNumber = res.data.clientAccountBankNumber
      apiData.type = res.data.paperInvoiceType
    }
  })
}
onMounted(() => {
  review()
})
</script>

<style scoped lang="less">
.form {
  padding: 0 228px;
}
.buttons {
  text-align: center;
}
.ant-divider {
  border-top: 1px solid #dcdee7 !important;
}
</style>
<route lang="yaml">
name: Tax Info
path: '/client/:id/financial-information/tax-info'
meta:
  title: Tax Info
  permission: FinancialInformation
</route>
